<!--
 * @Description: 文章详情页
 * @Author: zheng yiliang
 * @Date: 2021-04-27 20:46:46
 * @LastEditTime: 2021-06-13 16:45:09
 * @LastEditors: zheng yiliang
-->
<template>
  <div class="col-content detail" v-show="article || complete">
    <div class="inner">
      <article class="article-list">
        <!-- <input type="hidden" value="@Model.BlogTypeID" id="blogtypeid" /> -->
        <template v-if="article">
          <section class="article-item">
            <aside class="title" style="line-height: 1.5">
              <h4>{{ article.title }}</h4>
              <p class="fc-grey fs-14">
                <small>
                  作者：<a class="fc-link">{{ article.author }}</a>
                </small>
                <small class="ml10"
                  >总浏览：<i class="readcount" v-if="article.meta">{{
                    article.meta.views
                  }}</i></small
                >
                <small class="ml10"
                  >更新于 <label>{{ article.update_time | dateTime }}</label>
                </small>
              </p>
            </aside>
            <div class="time mt10" style="padding-bottom: 0">
              <span class="day">{{
                article.create_time | dateSlice('DD')
              }}</span>
              <span class="month fs-18"
                >{{ article.create_time | dateSlice('MM')
                }}<small class="fs-14">月</small></span
              >
              <span class="year fs-18">{{
                article.create_time | dateSlice('YYYY')
              }}</span>
            </div>
            <div
              class="content artiledetail"
              style="border-bottom: 1px solid #e1e2e0; padding-bottom: 20px"
            >
              <div v-if="article" class="detail-markdow">
                <div v-html="compiledMarkdown"></div>
              </div>
              <div class="copyright mt20">
                <p class="f-toe fc-black">
                  非特殊说明，本文版权归 正好有时间 所有，转载请注明出处.
                </p>
                <p class="f-toe">
                  本文标题：
                  <a href="javascript:void(0)" class="r-title">{{
                    article.title
                  }}</a>
                </p>
                <p class="f-toe">
                  本文网址：
                  <router-link :to="$route.fullPath">{{ href }}</router-link>
                </p>
              </div>
              <div id="aplayer" style="margin: 5px 0"></div>
              <h6>延伸阅读</h6>
              <ol class="b-relation">
                <li class="f-toe" v-if="pre">
                  上一篇：<router-link :to="`/detail?id=${pre._id}`">{{
                    pre.title
                  }}</router-link>
                </li>
                <li class="f-toe" v-if="next">
                  下一篇：
                  <router-link :to="`/detail?id=${next._id}`">{{
                    next.title
                  }}</router-link>
                </li>
              </ol>
            </div>

            <comments :articleId="article.id"></comments>
          </section>
        </template>
        <null v-else></null>
      </article>
    </div>
  </div>
</template>
<script>
import { getArticleById, preAndNext } from '@/api'
import marked from 'marked'
import hljs from 'highlight.js'
// import 'highlight.js/styles/gruvbox-dark.css'
import 'highlight.js/styles/monokai-sublime.css'
import Null from '@/components/null'
import Comments from '@/components/comments'

export default {
  components: {
    Null,
    Comments
  },
  data() {
    return {
      complete: false,
      article: '',
      pre: '',
      next: '',
      href: window.location.href
    }
  },
  computed: {
    compiledMarkdown: function () {
      return marked(this.article.content).replace(
        /<pre>/g,
        "<pre class='hljs'>"
      )
    }
  },
  mounted() {
    // renderer: 这个是必须填写的，你可以通过自定义的Renderer渲染出自定义的格式
    // gfm：启动类似Github样式的Markdown，填写true或者false
    // tables： 支持Github形式的表格，必须打开gfm选项，填写true或者false
    // breaks: 支持Github换行符，必须打开gfm选项，填写true或者false
    // pedantic：只解析符合Markdown定义的，不修正Markdown的错误。填写true或者false
    // sanitize: 原始输出，忽略HTML标签，默认为false。 对输出进行过滤（清理），将忽略任何已经输入的html代码（标签）
    // smartLists：优化列表输出，这个填写ture之后，你的样式会好看很多，所以建议设置成ture
    // highlight: 高亮显示规则 ，这里我们将使用highlight.js来完成

    const renderer = new marked.Renderer()
    // // marked插件的基础设置
    // marked.setOptions({
    //   renderer: renderer,
    //   highlight: function (code) {
    //     // 使用highlight 插件解析文档中代码部分,可直接设置高亮显示
    //     return hljs.highlightAuto(code).value
    //   },
    //   gfm: true,
    //   tables: true,
    //   breaks: false,
    //   pedantic: false,
    //   sanitize: false,
    //   smartLists: true,
    //   smartypants: false,
    //   xhtml: false
    // })

    console.log(hljs)
    hljs.configure({
      tabReplace: '  ',
      classPrefix: 'hljs-',
      languages: [
        'CSS',
        'HTML, XML',
        'JavaScript',
        'PHP',
        'Python',
        'Stylus',
        'TypeScript',
        'Markdown'
      ]
    })

    marked.setOptions({
      renderer: renderer,
      pedantic: false,
      gfm: true,
      breaks: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
      xhtml: false,
      highlight: (code) => hljs.highlightAuto(code).value
    })
  },
  methods: {
    async preAndNext(id) {
      const { _RejCode, data } = await preAndNext(id)
      console.log(_RejCode, data)
      this.pre = data.pre
      this.next = data.next
      // if (_RejCode !== '00000000') return
    }
  },
  watch: {
    // 监听路由query参数，查询所属分类id下的文章
    '$route.query': {
      handler: async function (query, oldQuery) {
        if (oldQuery) {
          if (query.id === oldQuery.id) return
        }
        this.article = ''
        const id = query.id
        const { _RejCode, data } = await getArticleById(id)
        console.log(_RejCode)
        this.complete = true
        this.preAndNext(data.id)
        if (_RejCode !== '00000000') return
        this.$nextTick()
        this.article = data
      },
      // 深度观察监听
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .detail-markdow {
  * {
    margin: revert;
    padding: revert;
  }
  a,
  img {
    text-decoration: initial;
    border: initial;
  }
  h4 {
    font-size: initial;
  }

  li {
    list-style: initial;
  }
}
::v-deep img {
  width: 100%;
}
</style>
